<template>
    <div class="wrap normal">
        <!-- 搜索条件 -->
        <div class="wrap-form" id="wrap-form">
            <div class="left-panel">
                <el-form :inline="true" :model="form" label-width="100px" @submit.native.prevent>
                    <el-form-item label="聚合搜索">
                        <el-input v-model="form.content" placeholder="请输入寄件人姓名、收件人姓名、手机号、单号" clearable style="width: 320px"></el-input>
                    </el-form-item>
                    <el-form-item label="下单人手机号">
                        <el-input v-model="form.orderMobile" placeholder="请输入" clearable style="width: 220px"></el-input>
                    </el-form-item>
                    <el-form-item label="快递公司">
                        <el-select v-model="form.carrierCode" placeholder="请选择" clearable style="width: 220px">
                            <el-option v-for="(item, index) in carrierOptions" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="下单时间">
                        <el-date-picker v-model="form.createTimeStart" clearable type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="开始时间" style="width: 220px"></el-date-picker>
                        <span class="form-time-line">-</span>
                        <el-date-picker v-model="form.createTimeEnd" clearable type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间" style="width: 220px"></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="pageOperate('search')">查询</el-button>
                        <el-button icon="el-icon-refresh" @click="pageOperate('refresh')">刷新</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!-- table数据 -->
        <div class="wrap-table">
            <el-table :data="tableData" :max-height="tableMaxHeight" border v-loading="tableLoading" :header-cell-style="{ background: '#F5F6FA' }">
                <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
                <el-table-column label="下单时间" min-width="140">
                    <template slot-scope="scope">
                        {{ scope.row.createTime | iso8601DateTimeFormat }}
                    </template>
                </el-table-column>
                <el-table-column prop="outTradeNo" label="商户订单号" min-width="180"> </el-table-column>
                <el-table-column prop="carrierName" label="快递公司" min-width="100"> </el-table-column>
                <el-table-column prop="courierNumber" label="快递单号" min-width="140"> </el-table-column>
                <el-table-column prop="parcelStatusName" label="订单状态" min-width="140"> </el-table-column>
                <el-table-column prop="itemTypeName" label="物品名称" min-width="100"> </el-table-column>
                <el-table-column label="快递员信息" align="center">
                    <el-table-column prop="courierName" label="快递员姓名" min-width="100"> </el-table-column>
                    <el-table-column prop="courierMobile" label="快递员电话" min-width="100"> </el-table-column>
                    <el-table-column prop="pickupCode" label="取件码" min-width="100"> </el-table-column>
                </el-table-column>
                <el-table-column label="用户下单支付数据" align="center">
                    <el-table-column prop="estimatedMoney" label="金额" min-width="100"> </el-table-column>
                    <el-table-column prop="estimatedWeight" label="重量" min-width="100"> </el-table-column>
                    <el-table-column prop="lastWeight" label="最终计费重量" min-width="100"> </el-table-column>
                    <el-table-column label="支付时间" min-width="140">
                        <template slot-scope="scope">
                            {{ scope.row.payCompleteTime | iso8601DateTimeFormat }}
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="代理佣金信息" align="center">
                    <el-table-column prop="agentProfit" label="代理利润" min-width="120"></el-table-column>
                    <el-table-column prop="isAgentProfitName" label="是否分润" min-width="120"> </el-table-column>
                </el-table-column>
                <el-table-column label="退/补费信息" align="center">
                    <el-table-column prop="isNeedMoreMoneyName" label="补/退" min-width="120"> </el-table-column>
                    <el-table-column label="金额" min-width="120">
                        <template slot-scope="scope">
                            <!-- 待补交费用总金额 -->
                            <span v-if="scope.row.isNeedMoreMoney === 2">{{ scope.row.supplementaryPayMoreMoney }}</span>
                            <!-- 待退费用总金额 -->
                            <span v-if="scope.row.isNeedMoreMoney === 3">{{ scope.row.returnPremiumMoney }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="parceOrderMorePayStatusName" label="状态" min-width="120"> </el-table-column>
                </el-table-column>
                <el-table-column label="下单人信息" align="center">
                    <el-table-column label="姓名" min-width="120">
                        <template slot-scope="scope" v-if="scope.row.orderUserInfo">
                            {{ scope.row.orderUserInfo.userRealName }}
                        </template>
                    </el-table-column>
                    <el-table-column label="联系方式" min-width="120">
                        <template slot-scope="scope" v-if="scope.row.orderUserInfo">
                            {{ scope.row.orderUserInfo.mobile }}
                        </template>
                    </el-table-column>
                    <el-table-column label="身份" min-width="120">
                        <template slot-scope="scope" v-if="scope.row.orderUserInfo">
                            {{ scope.row.orderUserInfo.agentLevelName }}
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="寄件人信息" align="center">
                    <el-table-column label="姓名" min-width="120">
                        <template slot-scope="scope" v-if="scope.row.orderUserInfo">
                            {{ scope.row.basUserAddressBookFrom.name }}
                        </template>
                    </el-table-column>
                    <el-table-column label="联系方式" min-width="120">
                        <template slot-scope="scope" v-if="scope.row.basUserAddressBookFrom">
                            {{ scope.row.basUserAddressBookFrom.mobile }}
                        </template>
                    </el-table-column>
                    <el-table-column label="地址" min-width="240">
                        <template slot-scope="scope" v-if="scope.row.basUserAddressBookFrom">{{ scope.row.basUserAddressBookFrom.province }}{{ scope.row.basUserAddressBookFrom.city }}{{ scope.row.basUserAddressBookFrom.district }}{{ scope.row.basUserAddressBookFrom.street }}{{ scope.row.basUserAddressBookFrom.address }} </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="收件人信息" align="center">
                    <el-table-column label="姓名" min-width="120">
                        <template slot-scope="scope" v-if="scope.row.basUserAddressBookTo">
                            {{ scope.row.basUserAddressBookTo.name }}
                        </template>
                    </el-table-column>
                    <el-table-column label="联系方式" min-width="120">
                        <template slot-scope="scope" v-if="scope.row.basUserAddressBookTo">
                            {{ scope.row.basUserAddressBookTo.mobile }}
                        </template>
                    </el-table-column>
                    <el-table-column label="地址" min-width="240">
                        <template slot-scope="scope" v-if="scope.row.basUserAddressBookTo">{{ scope.row.basUserAddressBookTo.province }}{{ scope.row.basUserAddressBookTo.city }}{{ scope.row.basUserAddressBookTo.district }}{{ scope.row.basUserAddressBookTo.street }}{{ scope.row.basUserAddressBookTo.address }} </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="操作" width="100" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" @click="pageOperate('logistic', scope.row)">物流信息</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination :total="page.totalNum" :page.sync="page.pageNum" :limit.sync="page.pageSize" layout="total, sizes, prev, pager, next, jumper" @pagination="getTableData" />
        </div>
        <!-- 弹框 -->
        <el-dialog v-if="operateDialog" :title="operateTitle" :visible.sync="operateDialog" @close="closeOperateDialog" :width="`${operateWidth}px`" :close-on-press-escape="false" :close-on-click-modal="false">
            <template v-if="operateType === 'logistic'">
                <widget-logistic ref="widgetLogistic" :id="operateForm.orderId"></widget-logistic>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { getRefundOrder } from '@/api/order'
import tableHeight from '@/mixins/tableHeight'
import { carrierOptions } from '@/filters/options'
import WidgetLogistic from './components/widgetLogistic.vue'
export default {
    name: 'orderIndex',
    mixins: [tableHeight],
    components: {
        WidgetLogistic
    },
    data() {
        return {
            form: {
                content: '',
                carrierCode: '',
                orderMobile: '',
                createTimeStart: '',
                createTimeEnd: ''
            },
            page: {
                pageNum: 1,
                pageSize: 10,
                totalNum: 0
            },
            tableData: [],
            tableLoading: false,
            // 类型
            operateType: '',
            // 标题
            operateTitle: '',
            // 弹框
            operateDialog: false,
            // 宽度
            operateWidth: 550,
            // loading
            operateLoading: false,
            // 操作form
            operateForm: {
                orderId: ''
            },
            operateRules: {

            },
            // 快递公司
            carrierOptions
        };
    },
    methods: {
        // 数据
        getTableData() {
            this.tableLoading = true
            const data = {
                pageNum: this.page.pageNum,
                pageSize: this.page.pageSize,
                ...this.form
            }
            getRefundOrder(data).then(res => {
                this.tableLoading = false
                this.tableData = res.data.records
                this.page.totalNum = res.data.total
            }).catch(error => {
                this.tableLoading = false
            })
        },
        // 操作
        pageOperate(type, row) {
            this.operateType = type
            switch (type) {
                case 'search':
                    this.getTableData()
                    break;
                case 'refresh':
                    Object.assign(this.$data, this.$options.data())
                    this.getTableData()
                    break;
                case 'logistic':
                    this.operateTitle = '物流信息'
                    this.operateWidth = 800
                    this.operateDialog = true
                    this.operateForm.orderId = row.id
                    this.$nextTick(() => {
                        this.$refs.widgetLogistic.initLogistic()
                    })
                    break;
                default:
                    break;
            }
        },
        // 关闭操作按钮
        closeOperateDialog() {
            this.operateLoading = false
            this.operateDialog = false
            this.operateTitle = ''
            this.operateType = ''
            this.operateForm = this.$options.data().operateForm
        },
    },
    mounted() {
        this.getTableData()
    }
};
</script>

<style lang="scss" scoped>
</style>